<template>
    <div class="search">
        <el-autocomplete clearable placeholder="请输入医院名称"
            v-model="hostName"
            :fetch-suggestions="fetchData"
            :trigger-on-focus="false"
            @select="goDetail"
        />
      <el-button type="primary" size="default" :icon="Search">搜索</el-button>
    </div>
</template>

<script setup lang="ts">
    //引入 element-plus 提供图标
    import { Search } from '@element-plus/icons-vue';
    //引入路由
    import { useRouter } from 'vue-router';
    import {ref} from 'vue';
    //引入请求方法
    import {reqHospitalInfo} from "@/api/home";
    //引入数据类型
    import type {HospitalInfo} from "@/api/home/type";
    //收集搜索的关键字(医院的名字)
    let hostName = ref<string>('');
    //创建路由器对象
    let $router = useRouter();
    //搜索组件的回调
    const fetchData = async(keyword:string,cb:any) => {
        //当用户输入完关键字，此函数会执行一次，发请求获取需要展示的数据即可
        let result:HospitalInfo = await reqHospitalInfo(keyword);
        //整理数据，变成人家组件需要的数据格式
        let showData = result.data.map(item => {
            return {
                value : item.hosname,//展示医院的名字
                hostCode: item.hoscode//存储医院的编码
            }
        })
        //给组件提供展示的数据
        cb(showData);
    }
    //点击某一个推荐项
    const goDetail = (item:any) => {
        //医院编码
        //console.log(item.hostCode);
        //点击推荐项，进入医院详情页，将来需要携带 query参数(医院的编码)
        $router.push({path:'/hospital/register',query:{hoscode:item.hostCode}})
    }
</script>
<script lang="ts">
    export default {
        name : 'Search'
    }
</script>


<style scoped lang="scss">
    .search {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0px;

        //深度选择器: 1.>>> 2./deep/ 3.::v-deep
        //这里选择了搜索框，因为搜索框是一个组件,无法直接应用样式
        //为了不破坏 scoped 的效果
        //所以这里根据生成到页面的类样式+深度选择器来控制样式
        ::v-deep(.el-input__wrapper) {
            width:600px;
            margin-right: 10px;
        }
    }
</style>